<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>슬라이드 네비(메뉴) 예제 - jquery 사용, 직접제작</title>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<link rel="stylesheet" href="../css/JinReset.css" /><!-- css 초기화 -->
<link rel="stylesheet" href="css/layout.css" />
<script src="js/jquery-2.0.2.min.js"></script><!-- jQuery 불러오기(최신버전 jQuery 소스는 jquery.com 에서 다운받을 수 있음) -->
<script src="../js/topBtn.js"></script><!-- 버튼액션(직접제작) -->
<script src="prefixfree.min.js"></script><!-- css3 접두어 자동 생성 -->
<style>
html, body{overflow-x:hidden}
h1{display:none}

#wrap{position:relative;left:0;top:0;width:100%;z-index:9997;transition:all 0.3s ease}
#header{width:100%;height:auto;padding:10px 0;border-bottom:1px solid gray;text-align:center}

.menuBtn{transition: all 0.3s ease;position:fixed;left:0;top:10px;background:#06c;width:30px;height:30px;padding:10px;text-align:center;font-weight:bold;font-size:2.5em;line-height:30px;color:#fff;cursor:pointer;border-top-right-radius:7px;border-bottom-right-radius:7px;z-index:10000}
.menuBtn>.menuIcon{display:block}
.menuBtn>.closeIcon{display:none}

#gnb{transition: all 0.3s ease;position:fixed;left:-80%;top:0;width:80%;height:100%;background:#06c;z-index:9999;overflow:auto}
#gnb>h1{display:block;width:80%;padding:0 10%;font-size:3em;line-height:1.75em;color:#fff}
#gnb a{display:block;background:#39f;font-size:2em;line-height:1.75em;color:#fff;
	overflow:hidden;			 /****************************/
	white-space:nowrap;		 /* width 넘어가는 글자 잘림 */
	text-overflow:ellipsis;/****************************/
}
#gnb a:hover{font-weight:bold;color:#06c}

#gnb .mainMenu>li>a{width:80%;padding:0 10%;border-top:1px solid #9cf;border-bottom:1px solid #06c}

#gnb .mainMenu>li .subMenu{display:none}
#gnb .mainMenu>li.open .subMenu{display:block}
#gnb .subMenu>li>a{width:70%;padding:0 15%;font-size:1.55em}

#container{width:90%;min-height:740px;padding:30px 5% 40px;overflow:hidden}
#footer{position:fixed;left:0;bottom:0;width:90%;height:20px;padding:10px 5%;background:gray;text-align:right;font-size:0.75em;line-height:20px;color:#fff}

/* gnb active */
#gnb.active{left:0}
#wrap.active,.menuBtn.active{left:80%}
.menuBtn.active>.menuIcon{display:none}
.menuBtn.active>.closeIcon{display:block}

/* Site Overlay */
.siteOverlay{display:none}
.siteOverlay.active{display:block;position:fixed;top:0;right:0;bottom:0;left:80%;z-index:9998}
</style>
<script>
$(document).ready(function(){
	$(".menuBtn").click(function(){//menuBtn을 클릭했을때 실행
		if($("#gnb").hasClass("active")){//gnb에 active라는 클래스가 있는지 확인
			//active 클래스가 있으면, 모든대상(메뉴 활성/비활성화 시 함께 변경되는 요소)에 active클래스 삭제
			$(".menuBtn").removeClass("active");
			$("#wrap").removeClass("active");
			$(".siteOverlay").removeClass("active");
			$("#gnb").removeClass("active");
			
			//body 스크롤 생기게 함
			$("html,body").css("overflow","auto");
		}else{
			//active 클래스가 없으면 모든대상(메뉴 활성/비활성화 시 함께 변경되는 요소)에 active클래스 추가
			$(".menuBtn").addClass("active");
			$("#wrap").addClass("active");
			$(".siteOverlay").addClass("active");
			$("#gnb").addClass("active");
			
			//body 스크롤 안생기게 함(메뉴 스크롤시 뒤에 있는 컨텐츠가 움직이며 오작동 되는것 방지)
			$("html,body").css("overflow","hidden");
		}
	})
	
	$(".siteOverlay").click(function(){//siteOverlay 클릭시 실행(siteOverlay는 menuBtn과 메뉴영역 이외에 다른 공간을 눌러도 메뉴가 들어가도록 하기위해 만든 투명div입니다)
		if($(this).hasClass("active")){
			/*
			 * this는 상위 .click에서 선택한 선택자(.siteOverlay) 입니다.
			 * siteOverlay에 active클래스가 있으면 모든대상(메뉴 활성/비활성화 시 함께 변경되는 요소)에 active클래스 삭제
			 */
			$(".menuBtn").removeClass("active");
			$("#wrap").removeClass("active");
			$(".siteOverlay").removeClass("active");
			$("#gnb").removeClass("active");
			
			//body 스크롤 생기게 함
			$("html,body").css("overflow","auto");
			
			//모든 서브메뉴 비활성화
			$(".mainMenu>li").removeClass("open");
		}
		//siteOverlay는 위 menuBtn.click에서 클래스가 추가된 후에만 활성화(클릭이 가능하게) 되므로 else(active클래스가 없을경우 addclass에 대한) 설정을 줄 필요가 없음
	})

	// 서브메뉴 활성화
	var menuLength = $(".mainMenu>li").length; //1차메뉴의 총 개수
	for(i=1;i<=menuLength;i++){ //반복문 : i라는 변수가 1부터 1차메뉴의 총 개수가 될때까지 i변수의 값을 1씩 증가시킴, 변수 i가 총 개수와 같아지면 반복문 자동 종료.
		subMenuOpen(i);//서브메뉴 활성화 함수를 불러옴
		// 아래 함수에 no를 변수 i로 대치시켜 특정순서의 메뉴 1개만 지정 가능하도록 함
	}
	
	// 1차메뉴 클릭 시, 클릭된 메뉴의 서브메뉴가 활성화 되도록 하는 함수
	function subMenuOpen(no){
		$(".mainMenu>li:nth-child("+no+")").click(function(){//no번째 li를 클릭하면...
			if($(".mainMenu>li:nth-child("+no+")").hasClass("open")){//no번째 li의 서브메뉴에 open이라는 클래스가 있는지 확인
				//open이라는 클래스가 있으면 open클래스 삭제
				$(".mainMenu>li:nth-child("+no+")").removeClass("open");
			}else{//open이라는 클래스가 없으면
				//모든 서브메뉴 비활성화
				$(".mainMenu>li").removeClass("open");
				//open클래스 추가
				$(".mainMenu>li:nth-child("+no+")").addClass("open");
			}
		})
	}
})
</script>
</head>
<body>
<nav id="gnb">
  <h1>All Menus</h1>
  <ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">menu 1</a>
   	<ul class="subMenu">
      	<li><a href="#">sub 1</a></li>
      	<li><a href="#">sub 2</a></li>
      	<li><a href="#">sub 3</a></li>
      	<li><a href="#">sub 4</a></li>
      	<li><a href="#">sub 5</a></li>
      	<li><a href="#">sub 6</a></li>
    </ul>
    </li>
    <li><a href="#">menu 2</a>
    	<ul class="subMenu">
      	<li><a href="#">sub 1</a></li>
      	<li><a href="#">sub 2</a></li>
      	<li><a href="#">sub 3</a></li>
      	<li><a href="#">sub 4</a></li>
      </ul>
    </li>
    <li><a href="#">menu 3</a>
    	<ul class="subMenu">
      	<li><a href="#">sub 1</a></li>
      	<li><a href="#">sub 2</a></li>
      	<li><a href="#">sub 3</a></li>
      </ul>
    </li>
    <li><a href="#">menu 4</a>
    	<ul class="subMenu">
      	<li><a href="#">sub 1</a></li>
      	<li><a href="#">sub 2</a></li>
      </ul>
    </li>
    <li><a href="#">menu 5</a>
    	<ul class="subMenu">
      	<li><a href="#">sub 1</a></li>
      	<li><a href="#">sub 2</a></li>
      	<li><a href="#">sub 3</a></li>
      	<li><a href="#">sub 4</a></li>
      </ul>
    </li>
  </ul>
</nav>
<!-- Site Overlay -->
<div class="siteOverlay"></div>
<div id="wrap">
  <div class="menuBtn"><span class="menuIcon">&#9776;</span><span class="closeIcon">&lt;</span></div>
  <header id="header">
  	<h1>HEADER</h1>
  	<a href="" id="logo"><img src="../images/logo.png" alt="로고"/></a>
  </header>
  <section id="container">
    <a class="link" href="index.html">목록으로</a>
    <a id="btn_bottom" class="link" href="#bottom">아래로</a>
    <h1>CONTAINER</h1>
    <article>
    	<h1>Contents</h1>
      <p>Sed hendrerit elit sit amet turpis volutpat pharetra. Cras ac magna at felis sollicitudin pellentesque sit amet quis massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent at lorem quis est adipiscing tempus. Quisque volutpat dolor quam, et scelerisque neque fermentum at. Vestibulum tempor aliquet sem sodales eleifend. Duis at tempus odio. Aliquam dictum scelerisque tellus consectetur cursus. Aliquam vel leo vitae tellus viverra dignissim at nec elit. Proin dignissim quam turpis, nec consectetur metus mattis vitae. Curabitur tincidunt justo in imperdiet congue. Maecenas pharetra massa a ante dictum, a accumsan erat accumsan. Integer eleifend enim quis est bibendum, in fermentum elit commodo. Etiam pellentesque cursus egestas. Phasellus nec luctus arcu.<br/><br/>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut consectetur turpis vitae felis viverra sagittis. Phasellus mi neque, gravida vel dolor at, scelerisque elementum felis. Morbi sagittis dui sem, sed ullamcorper erat interdum quis. Nam et nisi ornare, varius massa id, facilisis leo. Quisque suscipit rhoncus sapien, vitae dignissim magna bibendum sit amet. Mauris eget leo tempor, volutpat orci eget, elementum dui. Etiam elit orci, sodales eu lobortis eget, ornare posuere tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis id vehicula nisi. Fusce vitae fringilla enim, nec venenatis nibh. Curabitur hendrerit a lectus nec facilisis. Integer ornare est enim, quis vulputate risus venenatis sed. Nunc fermentum urna at turpis gravida lacinia sit amet a sapien. Morbi accumsan cursus tincidunt.<br/><br/>Nullam bibendum, leo at fringilla sollicitudin, libero lacus lobortis mi, et faucibus sapien odio sed magna. Aliquam non sollicitudin metus. Curabitur eget vehicula quam. Vivamus augue augue, vestibulum eu ullamcorper auctor, porttitor et mauris. Suspendisse condimentum urna sit amet ornare hendrerit. Nulla malesuada lectus mauris, ut malesuada nibh convallis eget. Integer vulputate sem eget quam porttitor dapibus. Fusce tempus lorem eleifend egestas tincidunt. Cras cursus nisi neque. Cras in ligula mauris. Phasellus tempor, velit nec feugiat viverra, nulla lectus lacinia ante, et consectetur mauris ante in odio. Proin rutrum a eros vel sollicitudin. Sed vel rutrum sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;<br/><br/>Donec varius, diam at pellentesque aliquam, orci erat congue libero, sed cursus urna quam ut justo. Donec et congue turpis. Curabitur at viverra metus, venenatis lobortis odio. Aenean tincidunt eros in orci imperdiet congue. Nulla nec cursus tellus, cursus fringilla lectus. Fusce tincidunt posuere velit ac lobortis. Suspendisse potenti.</p>
    </article>
    <a class="link" href="index.html">목록으로</a>
    <a id="btn_top" class="link" href="#top">맨위로</a>
  </section>
  <footer id="footer">copyright&copy; JG_Study</footer>
</div>
</body>
</html>
